<template>
  <a-layout-sider
    :style="{margin: '24px 0px 0px 16px'}"
    width="250"
    :selectable="true"
    breakpoint="xl"
    collapsedWidth="0"
  >
    <a-menu
      theme="light"
      mode="inline"
      :defaultOpenKeys="selectSub"
      :defaultSelectedKeys="selectMenu"
      @select="selectItem"
    >
    <template v-for="(item,i) in $store.state.menu.menus">
        <template v-if="!item.name">
          <a-menu-item v-for="(item1,k) in item.children" :key="i+'-'+k">
            <router-link :to="item1.url">
              <i :class="item1.icon" :style="{width:'32px'}" />
              <span class="nav-text">{{item1.name}}</span>
            </router-link>
          </a-menu-item>
        </template>
      <a-sub-menu v-else  :key="''+i">
          <span slot="title">
            <i :class="item.icon" :style="{width:'32px'}" />
            <span class="nav-text">{{item.name}}</span>
          </span>
          <a-menu-item v-for="(item1,k) in item.children" :key="i+'-'+k">
            <router-link :to="item1.url">
              <i :class="item1.icon" :style="{width:'32px'}" />
              <span class="nav-text">{{item1.name}}</span>
            </router-link>
          </a-menu-item>
      </a-sub-menu>
    </template>
    </a-menu>
  </a-layout-sider>
</template>

<script>
export default {
  data() {
    return {
      selectSub: [sessionStorage.getItem("menuSub") || ""],
      selectMenu: [sessionStorage.getItem("menuItem") || ""]
    };
  },
  methods: {
    selectItem({ item, key, selectedKeys }) {
      this.selectMenu = selectedKeys;
      this.selectMenu.push(selectedKeys[0].split("-")[0]);
      sessionStorage.setItem("menuSub", selectedKeys[0].split("-")[0]);
      sessionStorage.setItem("menuItem", selectedKeys[0]);
    }
  }
};
</script>

<style lang="scss">
$fts: 18px;
#common-layout {
  .ant-menu-item {
    font-size: $fts;
    .anticon {
      font-size: $fts;
    }
  }
  .ant-menu-submenu-title {
    font-size: $fts;
  }
  .ant-layout-sider {
    background: #fff;
  }
}
</style>